<template>
  <div id="webgl" style="margin-top: 200px;margin-left: 100px"></div>
</template>

<script setup>
/**
 * three.js学习
 * 1. 创建场景： 场景是所有3D元素的容器
 * 2. 创建几何体： 
 *      几何体是3D模型的基础，由顶点和面组成
 *      顶点： 3D空间中的点
 *      面： 由三个顶点组成的三角形
 *      基本的几何体有： 长方体（BoxGeometry）、球体(SphereGemoetry)、圆柱体、圆锥体、面片
 * 3. 创建材质: 材质决定了几何体的外观（比如颜色）, 有很多种材质，比如：基础材质、光线材质、标准材质、物理材质
 * 4. 创建网格: 网格是几何体和材质的结合
 * 5. 创建相机: 相机决定了场景中那个角度的内容会显示在屏幕上
 * 6. 创建渲染器: 渲染器会在屏幕上渲染场景
 * 7. 渲染: 将场景和相机传递给渲染器，渲染器会在屏幕上显示场景
 * 8. 将渲染器添加到页面中
 */

// 光源对物体表面的影响
// 1. 环境光： 无处不在的光源，对物体表面的影响是均匀的
// 2. 点光源： 从一个点向四面八方发射光线，光线越远，光线越弱
// 3. 平行光： 从一个方向发射光线，光线是平行的
// 4. 聚光灯： 从一个点向一个方向发射光线，光线是聚焦的

// 相机控件
// 1. OrbitControls: 用于控制相机的旋转、缩放、平移
// 2. FlyControls: 用于控制相机的飞行
// 3. TrackballControls: 用于控制相机的旋转、缩放、平移
// 使用步骤：
// 1. 创建控制器
// 2. 将控制器添加到渲染器中
// 3. 监听控制器的change事件，重新渲染场景
import { onMounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 创建场景
const scene = new THREE.Scene();
// 创建几何体
const geometry = new THREE.BoxGeometry(100,100,100);
// 创建材质
const material = new THREE.MeshLambertMaterial({color: 'pink'});
// 创建网格
const mesh = new THREE.Mesh(geometry, material);
// 设置网格的位置
mesh.position.set(0,0, 0);

const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(400, 200, 300);
pointLight.intensity = 2; 
pointLight.decay = 0.0
scene.add(pointLight);
// 将网格添加到场景
scene.add(mesh);

const width = 800;
const height = 500;

/**
 * 创建相机，参数分别是：视野角度、宽高比、近裁剪面、远裁剪面
 * 视野角度：决定了场景中有多少内容会显示在屏幕上
 * 宽高比：决定了渲染的内容会以怎样的比例显示在屏幕上
 * 近裁剪面和远裁剪面：决定了相机的渲染范围
 */
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
// 设置相机的位置
camera.position.set(200, 200, 200);
// 设置相机的焦点
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小
renderer.setSize(width, height);
renderer.render(scene, camera);

onMounted(() => {
  // 创建控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  document.body.appendChild(renderer.domElement);
  document.getElementById('webgl').appendChild(renderer.domElement);

  controls.addEventListener('change', () => {
    renderer.render(scene, camera);
  });
})
</script>

<style>

</style>